<template>
  <div class="menu-tree">
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @select="handleSelect"
    >
      <MenuItem :routerData="menuList" />
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import MenuItem from './MenuItem.vue'

const router = useRouter();

// 获取菜单
let localData:string = localStorage.getItem('menuList') || '';
let menuData:[] = JSON.parse(localData);
let menuList = ref(menuData)

const isCollapse = ref(false)
const handleSelect = (key: string, keyPath: string[]) => {
  router.push(key);
}
</script>

<style scoped>
.menu-tree{
    margin-top: 60px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
</style>